<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<style>
    #tab{
        width: 600px;
        margin: 0 auto;
    }
    .tab-tit{
        font-size: 0;
        width: 600;
    }
    .tab-tit a{
        display: inline-block;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        width: 25%;
        text-align: center;
        background: #e1e1e1;
        color: red;
        text-decoration: none;
    }
    .tab-tit .cur{
        background: #09f;
        color: #fff;
    }
    .tab-con div{
        border: 1px solid red;
        height: 400px;
        padding-top: 20px;
    }
</style>
</head>

<body>
    <div id="tab">
        <div class="tab-tit">
            <a href="javascript:;" @click='curld=0' :class="{'cur':curld===0}">女鞋</a>
            <a href="javascript:;" @click='curld=1' :class="{'cur':curld===1}">男鞋</a>
            <a href="javascript:;" @click='curld=2' :class="{'cur':curld===2}">儿童鞋</a>
            <a href="javascript:;" @click='curld=3' :class="{'cur':curld===3}">老年鞋</a>
        </div>
        <div class="tab-con">
            <div v-show='curld===0'>
               111111
            </div>
            <div v-show='curld===1'>
                2222
             </div>
             <div v-show='curld===2'>
                3333
             </div>
             <div v-show='curld===3'>
                4444
             </div>

        </div>
    </div>
    <script>
        var vm=new Vue({
           el:'#tab',
           data:{
               curld:0
           },
           methods:{}
        });
    </script>
</body>

</html>